<template>
    <div>
      <el-container height="700px" > 
          <!-- //头部 -->
          <el-header height="70px">  
            <div style="text-align: center; font-size: 22px; margin-top: 50px;">业绩看板</div>
          </el-header>
  
          <!-- //身体 -->
            <el-main>
              <!-- 本日业绩,本月业绩 -->
              <el-container>
                <el-col >
                
                    <el-tabs :stretch="true" v-model="activeName" @tab-click="handleClick">

                        <el-tab-pane label="本日业绩" name="today" >
                            <br>
                            <el-card class="box-card" >
                                <div class="text item">
                                    <span style="font-size:19px;"><b >{{ this.dayCount+'单' }}</b></span>
                                    <br>
                                    <br>
                                    {{'总分拣'}}
                                </div>
                            </el-card>
                        </el-tab-pane>

                        <el-tab-pane label="本月业绩" name="month" >
                            <br>
                            <el-card class="box-card" >
                                <div class="text item">
                                    <span style="font-size:19px;"><b>{{ this.monthCount+'单' }}</b></span>
                                    <br>
                                    <br>
                                    {{'总分拣'}}
                                </div>
                            </el-card>
                        </el-tab-pane>

                    </el-tabs>

                </el-col>
              </el-container>
    
  
              
              
            </el-main>
  
          <!-- //尾部 -->
          
      <el-footer>

            <!-- <div style="margin:-10px">
            
                <el-menu router mode="horizontal">
                <el-menu-item index="1" @click="$router.push('index')">首  页</el-menu-item>
                <el-menu-item index="2" @click="$router.push('type')"> 分  类</el-menu-item>    
                <el-menu-item index="3" @click="$router.push('carts')"> 购 物 车</el-menu-item>
                <el-menu-item index="4" @click="$router.push('my')"> 我  的</el-menu-item>
                </el-menu> 
            
            
            </div> -->


            </el-footer>
      </el-container>
  
  
    </div>
  </template>
  
  <script>
    
  export default {
      data(){
          return{

            dayCount:'',
            monthCount:'',
            activeName: 'today',
              
          }
      },
      methods:{
         
        //日期转字符串格式
        DateToStr(date) {
        var year = date.getFullYear();//年
        var month = date.getMonth();//月
        var day = date.getDate();//日
        var hours = date.getHours();//时
        var min = date.getMinutes();//分
        var second = date.getSeconds();//秒
        return year + "-" +
            ((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +
            (day > 9 ? day : ("0" + day)) + " " +
            (hours > 9 ? hours : ("0" + hours)) + ":" +
            (min > 9 ? min : ("0" + min)) + ":" +
            (second > 9 ? second : ("0" + second));
        },
        handleClick(tab, event) {
        console.log(tab, event);
        if(tab.index==0){
            let beginTime = new Date(new Date(new Date().toLocaleDateString()).getTime()); // 当天0点
            let endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -1);// 当天23:59
            let beginTimeStr=this.DateToStr(beginTime);
            let endTimeStr=this.DateToStr(endTime);
            console.log(beginTimeStr);
            console.log(endTimeStr);
            let orders={};
            orders.sorterId=sessionStorage.getItem("sorterId");
            orders.sortingBeginTime=beginTimeStr;
            orders.sortingEndTime=endTimeStr;

            this.$axios.post('api/app/getSortingOrderCount',orders)
           .then(res=>{   

                    if(res.data.code==200){
                        console.log(res.data);
                        this.dayCount=res.data.data;
                    }
                    
                }
            )
        }else if(tab.index==1){
            var firstDay = new Date();
            firstDay.setDate(1); //第一天
            firstDay.setHours(0);
            firstDay.setMinutes(0);
            firstDay.setSeconds(0);
            var now=new Date();
            let beginTimeStr=this.DateToStr(firstDay);
            let endTimeStr=this.DateToStr(now);
            console.log(beginTimeStr);
            console.log(endTimeStr);
            let orders={};
            orders.sorterId=sessionStorage.getItem("sorterId");
            orders.sortingBeginTime=beginTimeStr;
            orders.sortingEndTime=endTimeStr;

            this.$axios.post('api/app/getSortingOrderCount',orders)
           .then(res=>{   

                    if(res.data.code==200){
                        console.log(res.data);
                        this.monthCount=res.data.data;
                    }
                    
                }
            )


        }
      },
          
  
      },
      created(){
        let tab={};
        tab.index=0;
         this.handleClick(tab);
      }
  }
  </script>
  
  <style>
  .el-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
    background-color:rgba(246, 246, 246, 1)
  }
    <!-- .el-row{
      background-color: white;
      border-radius: 10px;
      
    } -->
    .text {
    font-size: 14px;
  }

  .item {
    padding: 0px ;
    margin-top: 50px;
    margin-left: 120px;

  }

  .box-card {
  
    width: 500px;
    height: 200px;
  }




    .textBtn{
      padding-left: 10px;
    }
    .el-icon-map-location{
      font-size: 20px;
      height: 20px;
      margin: 6px;
    }
    .sel{
      position:absolute;
      clip:rect(2px 90px 30px 2px);
      width:100px;
      height:10px;
      line-height:20px;
      font-size:20px;
      font-weight:bold;
    }
    .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0px 0px 0px;
}
.el-select .el-input__inner {
    cursor: pointer;
    padding-right: 35px;
    background-color: #efefef;
}
.el-avatar>img {
    margin: 0px 0px 0px -5px;
}
  </style>